<template>
    <div class="m-product-categroy">
        <dl class="classic">
            <dt>分类</dt>
            <dt>全部</dt>
            <dd>美食</dd>
            <dd v-for="(item) in classicList" :key="item.type">
                <ListSelect  :name="item.title"  :list="item.sub_list"/>
            </dd>
        </dl>

        <dl class="classic">
            <dt>区域</dt>
            <dt>全部</dt>
            <dd>美食</dd>
            <dd v-for="(item) in areaList" :key="item.type">
                <ListSelect  :name="item.title"  :list="item.sub_list"/>
            </dd>
        </dl>

    </div>
</template>

<script>
import ListSelect from './ListSelect.vue'

export default {
  name: 'categroy',
  data () {
    return {
      classicList: [{
        title: '美食',
        type: 'food',
        sub_list: [
          {
            name: '日本菜',
            id: 'Japan'

          },
          {
            name: '饮品店',
            id: 'drink'
          },
          {
            name: '面包甜点',
            id: 'cate'
          }
        ]
      }, {
        title: '酒店住宿',
        type: 'hotel',
        sub_list: [
          {
            name: '温泉酒店',
            id: 'Japan'

          },
          {
            name: '饮品店',
            id: 'drink'
          }, {
            name: '面包甜点',
            id: 'cate'
          }
        ]
      }],
      areaList: [{
        title: '推荐商圈',
        sub_list: [
          {
            name: '望京',
            id: 120000
          },
          {
            name: '昌平',
            id: 12222
          }
        ]
      }]
    }
  },
  components: {
    ListSelect
  }
}
</script>

<style lang="scss">

</style>
